<template>
  <el-row class="main-menu" :style="{ height: windowHeight }">
    <el-col>
      <el-menu
        :default-active="menuSelectIndex"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="#363743"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        router
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-reading"></i>
            <span>文章管理</span>
          </template>

          <el-menu-item index="1-1" :route="{ path: '/main/ArticleType' }"
            >文章类型</el-menu-item
          >
          <el-menu-item index="1-2" :route="{ path: '/main/ArticleContent' }"
            >文章内容管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-flag"></i>
            <span>广告管理</span>
          </template>

          <el-menu-item index="2-1" :route="{path: '/main/AdvertisingType'}">广告类型</el-menu-item>
          <el-menu-item index="2-2" :route="{path: '/main/AdvertisingContent'}">广告内容管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>残疾人管理</span>
          </template>

          <el-menu-item index="3-1" :route="{ path: '/main/Disabled' }"
            >残疾人管理</el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-pie-chart"></i>
            <span>健康管理</span>
          </template>

          <el-menu-item index="4-1" :route="{path: '/main/HealthDatas' }">健康数据</el-menu-item>
          <el-menu-item index="4-2" :route="{path: '/main/CommentaryManagement'}">评述管理</el-menu-item>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-chat-round"></i>
            <span>消息系统</span>
          </template>

          <el-menu-item index="5-1" :route="{path:'/main/messagesManage'}">消息管理</el-menu-item>
          <el-menu-item index="5-2" :route="{path:'/main/messagesType'}">消息类型</el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-monitor"></i>
            <span>应用服务管理</span>
          </template>
          <el-menu-item index="6-1" :route="{path:'/main/plain'}">应用服务管理</el-menu-item>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>对账管理</span>
          </template>

          <el-menu-item index="7-1" :route="{path:'/main/BillingDetails'}">账单明细</el-menu-item>
        </el-submenu>

        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-s-release"></i>
            <span>订单管理</span>
          </template>

          <el-menu-item index="8-1" :route="{path:'/main/order'}">订单列表</el-menu-item>
        </el-submenu>

        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-s-finance"></i>
            <span>退款管理</span>
          </template>

          <el-menu-item index="9-1" :route="{path:'/main/RefundIntervention'}">退款介入</el-menu-item>
          <el-menu-item index="9-2" :route="{path:'/main/OrderCancelled'}">订单取消配置</el-menu-item>
        </el-submenu>

        <el-submenu index="10">
          <template slot="title">
            <i class="el-icon-chat-dot-square"></i>
            <span>评价管理</span>
          </template>

          <el-menu-item index="10-1" :route="{path:'/main/EvaluationList'}">评价列表</el-menu-item>
          <el-menu-item index="10-2" :route="{path:'/main/MessageConfig'}">评价配置</el-menu-item>
        </el-submenu>

        <el-submenu index="11">
          <template slot="title">
            <i class="el-icon-bell"></i>
            <span>预案管理</span>
          </template>

          <el-menu-item index="11-1" :route="{path:'/main/PlanList'}">预案列表</el-menu-item>
          <el-menu-item index="11-2" :route="{path:'/main/PlanOwnership'}">预案归属</el-menu-item>
          <el-menu-item index="11-3" :route="{path:'/main/PlanType'}">预案类型</el-menu-item>
          <el-menu-item index="11-4" :route="{path:'/main/AccidentType'}">事故类型</el-menu-item>
        </el-submenu>

        <el-submenu index="12">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>陪护员管理</span>
          </template>

          <el-menu-item index="12-1" :route="{path:'/main/attendant'}">陪护员列表</el-menu-item>
        </el-submenu>

        <el-submenu index="13">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>系统管理</span>
          </template>

          <el-menu-item index="13-1" :route="{path:'/main/usermanage'}">用户管理</el-menu-item>
          <el-menu-item index="13-2" :route="{path:'/main/companymanage'}">企业管理</el-menu-item>
          <el-menu-item index="13-3" :route="{path:'/main/partmanage'}">部门管理</el-menu-item>
          <el-menu-item index="13-4" :route="{path:'/main/role'}">角色管理</el-menu-item>
          <el-menu-item index="13-5" :route="{path:'/main/regionmanage'}">区域管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: "",
      menuSelectIndex: sessionStorage.getItem("index")?sessionStorage.getItem("index"):"1-1",
    };
  },
  created() {
    this.windowHeight = window.innerHeight - 63 + "px";
    window.onresize = function () {
      this.windowHeight = window.innerHeight - 63 + "px";
    };
  },

  methods: {
    handleSelect(index, indexPath) {
      console.log(index); //被点击的菜单的索引
      // console.log(indexPath)
      this.menuSelectIndex = index;
      sessionStorage.setItem("index",index)
    },
  },
};
</script>

<style lang="less" scoped>
.main-menu {
  background-color: #363743;
  overflow: auto;
  position: fixed;
}
.el-row {
  width: 250px;
}
.el-menu {
  border-right-width: 0px !important;
}
</style>